import React from "react";
import { useNavigate, useLocation } from "react-router-dom";
import { type MenuProps, Menu } from "antd";
import * as Icons from "@ant-design/icons";
import authRouteList from "@/utils/authRouteList";
import mockMenu from "@/utils/mockMenu";
import { setPath } from "@/store/modules/breadcrumbSlice";
import { useDispatch, useSelector } from "react-redux";
// import { RootState } from "@/store";
// import { setSelectedKey } from "@/store/modules/menuSlice";
const items: MenuProps["items"] = mockMenu
  .map((item) => {
    if (item.meta.isHide) return null;

    const IconComponent = Icons[item.meta.icon];
    return {
      key: item.path,
      label: item.meta.title,
      icon: IconComponent ? React.createElement(IconComponent) : <></>,
      children: item.children
        ?.map((child) => {
          if (child.meta.isHide) return null;
          return {
            key: child.path,
            label: child.meta.title,
            icon: IconComponent ? React.createElement(IconComponent) : <></>,
          };
        })
        .filter(Boolean),
    };
  })
  .filter(Boolean);

const LayoutMenu: React.FC = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch();

  // const selectKey = useSelector((state: RootState) => state.menu.selectedKey);
  // const openKeys = useSelector((state: RootState) => state.menu.openKeys);
  const handleClickMenu = (e: any) => {
    const key = e.key;
    console.log(key);
    dispatch(setPath(key));
    // dispatch(setSelectedKey(key));
    navigate(key);
  };
  const [selectKeys, setSelectKeys] = React.useState<string[]>([useLocation().pathname]);
  const [openKeys, setOpenKeys] = React.useState<string[]>(["auth"]);
  return (
    <Menu
      mode="inline"
      defaultSelectedKeys={selectKeys}
      defaultOpenKeys={openKeys}
      style={{ height: "100%", borderRight: 0 }}
      items={items}
      onClick={handleClickMenu}
    />
  );
};

export default LayoutMenu;
